<template>
	<view class="box">
		<!-- 内容信息 -->
		<view class="contentInfo">
			<view class="contentInfoTop">
				<image src="@/static/images/f.png"></image>
				<view>
					<view>Ai壹力-陈墨一</view>
					<view>2020-01-01 · 成都壹立科技有限公司</view>
				</view>
			</view>
			<view class="contentInfoBody">
				<view class="contentInfoBodyText">趣来达外卖跑腿系统 打造本地专属品牌外卖平台</view>
				<view class="contentInfoBodyImg">
					<image :src="imgHost+'productImg.png'"></image>
				</view>
				<view class="contentInfoBodyNote">
					备注：有需要联系18081916514
				</view>
			</view>
			<view class="contentInfoBottom">
				<view class="contentInfoBottomViews">
					<view class="contentInfoBottomViewsLeft">
						<text>已浏览</text>
						<text>10086</text>
					</view>
					<view class="contentInfoBottomViewsRight">
						<text>如遇虚假信息请立即</text>
						<text>举报</text>
					</view>
				</view>
				<view class="contentInfoBottomThumbsUp">
					<view class="contentInfoBottomThumbsUpImg">
						<image v-for="item in 10" src="@/static/images/f.png"></image>
					</view>
					<view class="contentInfoBottomThumbsUpText">
						48 人点赞
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comments">
			<view class="commentsTop">
				<text>全部评论  26</text>
				<text>立即评论</text>
			</view>
			<view class="commentsContent">
				<view class="commentsContentBox" v-for="item in 5">
					<image src="@/static/images/f.png"></image>
					<view>
						<view>KC</view>
						<view>什么档次让我回复</view>
						<view>2022-01-01</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 立即咨询 -->
		<view class="consultNow">
			<view class="consultNowLeft">
				<view>
					<image :src="imgHost+'thumbsUp.png'"></image>
					<view>点赞</view>
				</view>
				<view>
					<image :src="imgHost+'phone.png'"></image>
					<view>通话</view>
				</view>
				<view>
					<image :src="imgHost+'share.png'"></image>
					<view>转发</view>
				</view>
			</view>
			<view class="consultNowRight">
				<image :src="imgHost+'feelgood.png'"></image>
				<text>立即咨询</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	     HTTP_REQUEST_URL
	} from '@/config/app.js';
	export default {
		data() {
			return {
				// 图片路径拼接
				imgHost:HTTP_REQUEST_URL + '/static/contactsCircle/',
			};
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding-bottom: 120rpx;
		.contentInfo{
			background-color: white;
			padding: 30rpx;
			.contentInfoTop{
				display: flex;
				align-items: center;
				&>image{
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}
				&>view{
					&>view:nth-of-type(1){
						font-size: 34rpx;
						font-weight: 600;
						margin-bottom: 10rpx;
					}
					&>view:nth-of-type(2){
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
			.contentInfoBody{
				.contentInfoBodyText{
					margin: 20rpx 0;
					font-size: 32rpx;
				}
				.contentInfoBodyImg{
					padding-bottom: 10px;
					display: grid;
					grid-template-columns: repeat(3,1fr);
					grid-gap: 10rpx;
					image{
						width:220rpx;
						height: 220rpx;
						// margin-right: 10rpx;
					}
				}
				.contentInfoBodyNote{
					font-size: 28rpx;
					color: #7A818D;
				}
			}
			.contentInfoBottom{
				margin: 20rpx 0 0 0;
				.contentInfoBottomViews{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.contentInfoBottomViewsLeft{
						font-size: 24rpx;
						color: #ADB3BC;
						text{
							margin-right: 20rpx;
						}
					}
					.contentInfoBottomViewsRight{
						color: #ADB3BC;
						font-size: 24rpx;
						text:nth-of-type(2){
							color: #976161;
						}
					}
				}
				.contentInfoBottomThumbsUp{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					.contentInfoBottomThumbsUpImg{
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							object-fit: cover;
							margin-right: -12px;
							border: 2rpx solid white;
						}
					}
					.contentInfoBottomThumbsUpText{
						margin-left: 50rpx;
						color: #7A818D;
						font-size: 28rpx;
					}
				}
			}
		}
		.comments{
			background-color: white;
			margin-top: 20rpx;
			padding: 30rpx;
			.commentsTop{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>text:nth-of-type(1){
					font-size: 34rpx;
				}
				&>text:nth-of-type(2){
					color: #E13D21;
				}
			}
			.commentsContent{
				.commentsContentBox{
					border-bottom: 2rpx solid #F0F0F0;
					padding: 30rpx 0 20rpx 0;
					display: flex;
					&>image{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
					}
					&>view{
						margin-left: 20rpx;
						&>view{
							margin: 20rpx 0;
						}
						&>view:nth-of-type(1){
							font-size: 28rpx;
						}
						&>view:nth-of-type(2){
							font-size: 32rpx;
						}
						&>view:nth-of-type(1){
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
				.commentsContentBox:last-of-type{
					border-bottom: none;
				}
			}
		}
		.consultNow{
			background-color: white;
			border-top: 2rpx solid #F0F0F0;
			width: 100%;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			.consultNowLeft{
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				padding-top: 10rpx;
				&>view{
					font-size: 24rpx;
					color: #7A818D;
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.consultNowRight{
				flex: 4;
				background-color: #E13D21;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 34rpx;
				}
			}
		}
	}
</style>
